<template>
  <l-data-panel v-if="data._isInit" :label="config.title">
    <l-echarts ref="main" :option="option"></l-echarts>
  </l-data-panel>
</template>
<script>
import mixin from "../chart";
export default {
  mixins: [mixin()],
  data() {
    return {
      option: {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            label: {},
            radius: [],
            center: [],
            itemStyle: {},
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    getOption() {
      const { labelKey, valueKey } = this.config;
      
      // 数据配置
      const legendData = [];
      const data = this.showData || [];
      if (labelKey && valueKey) {
        const serieData = [];
        data.forEach((t) => {
          serieData.push({ name: t[labelKey], value: t[valueKey], list: data });
          // 图例数据
          const legendItem = { name: t[labelKey] };
          if (this.legend.itemIcon) {
            legendItem.icon = this.legend.itemIcon;
          }
          legendData.push(legendItem);
        });
        this.option.series[0].data = serieData;

        // 为了实现进度环而做的特殊设置
        if (!this.label.show && this.label.lastShow && serieData.length > 0) {
          serieData[serieData.length - 1].label = { show: true };
        }
      }


      const serie = this.option.series[0];
      this.setPie(serie, this.series.pie);
      // 设置样式
      const {itemStyle} = this.series
      serie.itemStyle = itemStyle;

      // 文本标签设置
      serie.label = this.getLabel(this.label);
      serie.label.backgroundColor = this.label.backgroundColor

      // 图例设置
      this.option.legend = this.getLegend(this.option.series[0].data);
      this.option.legend.data = legendData;

      // 颜色设置
      const color = this.getColors(this.echarts);
      if (color && color.length > 0) {
        this.option.color = color;
      }

      return this.option;
    },
    setPie(serie, {radiusN,radiusW,centerH,centerV,roseType,selectedMode,selectedModeNum}) {
      if (radiusN < radiusW) {
        serie.radius = [`${radiusN}%`, `${radiusW}%`]; // 设置圆心和外圆大小
      } else {
        serie.radius = "50%";
      }

      if(selectedMode){
        serie.selectedMode = selectedMode
        if(serie.data.length > selectedModeNum){
          serie.data[selectedModeNum].selected = true;
        }
        
      }

      // 设置圆心位置
      serie.center = [`${centerH}%`, `${centerV}%`];
      
      // 南丁格尔玫瑰
      if (roseType) {
        serie.roseType = roseType;
      }
    },
  },
};
</script>

